<template>
  <div>
    <div class="chosedate">
      <span class="demonstration">选择统计时间:</span>
      <el-date-picker
        v-model="chosedate"
        type="datetimerange"
        :picker-options="pickerOptions2"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right">
      </el-date-picker>
      <el-button type="primary" @click="getDataList()">搜索</el-button>
    </div>
  <div class="mod-demo-echarts">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div id="J_chartLineBox" class="chart-box"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
  </div>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data () {
      return {
        chartLine: null,
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        chosedate:[],
        date:[],
        community:[],
        pageData:{}


      }
    },
    mounted () {
      var end = new Date()
      var start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
      var startdate = this.formatDate(start,"yyyy-MM-dd")
      var enddate =  this.formatDate(end,"yyyy-MM-dd")

      this.chosedate = [startdate, enddate]
      this.getDataList()

    },
    activated () {
      // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
      if (this.chartLine) {
        this.chartLine.resize()
      }
    },
    methods: {
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/statistics/equipment'),
          method: 'get',
          params: this.$http.adornParams({
            'startDate': this.chosedate[0]+" 00:00:00",
            'endDate': this.chosedate[1]+" 23:59:59"
          })
        }).then(({data}) => {
          this.pageData =JSON.parse(JSON.stringify(data.page, null, 4));
          this.date = data.date
          this.community = data.community
          console.log("pageData = ", this.pageData)
          console.log("date = ", this.date)
          console.log("community = ", this.community)
          this.initChartLine()
        })
      },
      // 折线图
      initChartLine () {
        var option = {
          'title': {
            'text': '设备数量统计图'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': this.community
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'data':  this.date
          },
          'yAxis': {
            'type': 'value'
          },
          'series': []
        }
        var  communityLength = this.community.length
        for(var i =0;i<communityLength; i++){
          var  series = {
              'name': this.community[i],
              'type': 'line',
              'data': [ ]
            }
           var key = this.community[i]
          var communityData = JSON.parse(JSON.stringify(this.pageData[key], null, 4))
          console.log("communityData = ",communityData)
          var dateLength = this.date.length
            for (var j =0;j<dateLength;j++){
              var  key2 = this.date[j]
              series.data.push(parseInt(communityData[key2].sumEqunum))
            }
         option.series.push(series)
        }
        this.chartLine = echarts.init(document.getElementById('J_chartLineBox'))
        console.log("option = ", JSON.stringify(option,null,4))
        this.chartLine.setOption(option)
        window.addEventListener('resize', () => {
          this.chartLine.resize()
        })
      },
      formatDate(date,fmt){
        if(/(y+)/.test(fmt)){
          fmt = fmt.replace(RegExp.$1, (date.getFullYear()+'').substr(4-RegExp.$1.length));
        }
        let o = {
          'M+': date.getMonth()+1,
          'd+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
        }
        for(let k in o){
          let str = o[k]+'';
          if(new RegExp(`(${k})`).test(fmt)){
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length===1)?str:this.padLeftZero(str));
          }
        }
        return fmt;
      },
    padLeftZero(str){
      return ('00'+str).substr(str.length);
    }
    }
  }
</script>

<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }
    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;
      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }
    .chart-box {
      min-height: 400px;
    }
  }
  .chosedate{
    margin-bottom: 10px;
    text-align: center;
  }
</style>

